import React, {Component} from 'react'
import {connect} from 'react-redux'
import {withRouter} from 'react-router-dom'
import _ from "lodash";
import Guo from "../../../../../../res/images/web/AI/guo@2x.png";
import AIResultList from "../../../../../AI/AIResultList/AIResultList";
import {Icon} from "antd-mobile";

class AIResult extends Component {
    constructor(props) {
        super(props)
        this.state = {
            px: 0,
        }
    }

    componentDidMount() {
        this.getAiResult()
    }

    getAiResult = () => {
        this.props.doGetAIResultList({
            p: this.state.px,
        })
    }

    goToGame = (e, detail) => {
        const history = this.props.history
        e.stopPropagation()
        history.push(`./game/${detail.matchId}`, {matchId: detail.matchId, status: detail.status, AIBtnClick: true, date:'',})
    }

    onScrollX = _.throttle(() => {
        const ctn = this.scrollXCtn
        const windowWidth = document.documentElement.clientWidth
        const x = ctn.scrollLeft
        const scrollWidth = ctn.scrollWidth
        if (windowWidth + x === scrollWidth) {
            this.setState({
                px: this.state.px + 1,
            }, () => {
                this.getAiResult()
            })
        }
    }, 100)

    render() {
        let style = 0
        let resultDate = this.props.game.aiResult[style] ? this.props.game.aiResult[style] : {}
        let result = []
        Object.values(resultDate).map(vals => {
            result.push(...vals)
        })
        return <>
            <div
                className='flex-space-between-align-center'
                style={{
                    padding: '12px',
                    height: '40px',
                    background: '#fff',
                }}
            >
                <div
                    className='flex-align-center'
                    style={{width: '30%',}}
                >
                    <img src={Guo} style={{width: 16, height: 16, marginRight: '4px',}} alt=''/>
                    <p>近期分析</p>
                </div>

                <div
                    onClick={() => this.props.history.push('../recent-ai')}
                >
                    {/*<span*/}
                    {/*    className='gray-text'*/}
                    {/*    style={{lineHeight: '40px',}}*/}
                    {/*>查看更多</span>*/}
                    <Icon type='right' color='#A6B0B7' />
                </div>
            </div>
            <div
                className='AI-result-list-ctn'
                onScroll={this.onScrollX}
                ref={el => this.scrollXCtn = el}
            >
                <AIResultList
                    resultList={result}
                    goToGame={this.goToGame}
                />
            </div>
        </>
    }
}

const mapState = state => ({
    game: state.game,
})
const mapDispatch = dispatch => ({
    doGetAIResultList: (payload) => dispatch.game.doGetAIResultList(payload),
})
export default connect(mapState, mapDispatch)(withRouter(AIResult))
